<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>fund</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2/lib/index.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2/lib/theme-chalk/index.min.css">
    <style>
        table,
        .el-tag {
            font-size: 1.4rem;
            /* 默认字体大小 */
        }
    </style>
</head>

<body>
    <div id="app">
        <el-table :data="tableData" style="width: 100%;" :default-sort="{prop: 'gszzl', order: 'descending'}">
            <el-table-column type="expand">
                <template slot-scope="scope">
                    <el-image
                        :src="'http://j4.dfcfw.com/charts/pic6/'+scope.row.fundcode+'.png?v='+new Date().getTime()">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="名称" prop="name" min-width="45%">
                <template slot-scope="scope">
                    <span :style='{color:["003096","009645"].includes(scope.row.fundcode)?"#FF0000":""}'>
                        {{ scope.row.name.slice(0, 15) + '('+scope.row.fundcode +')' }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="估值" prop="gszzl" min-width="15%" sortable :sort-method="sortByNumber">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.gszzl > 0 " type="danger" effect="dark">
                        {{ scope.row.gszzl }}%
                    </el-tag>
                    <el-tag v-else-if="scope.row.gszzl < 0 " type="success" effect="dark">
                        {{ scope.row.gszzl }}%
                    </el-tag>
                    <el-tag v-else effect="dark">
                        {{ scope.row.gszzl }}%
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="估算净值" prop="gsz" min-width="15%" sortable></el-table-column>
            <!-- <el-table-column label="最新净值" prop="dwjz" ></el-table-column> -->
            <el-table-column label="时间" prop="gztime" min-width="25%"></el-table-column>
        </el-table>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                fundArr: [
                    "012349",
                    "002667",
                    "011103",
                    "009068",
                    "011854",
                    "009180",
                    "008280",
                    "004857",
                    "003299",
                    "003985",
                    "005940",
                    "008190",
                    "007690",
                    "005224",
                    "004753",
                    "011513",
                    "011041",
                    "010770",
                    "002974",
                    "005693",
                    "002984",
                    "004070",
                    "007301",
                    "008087",
                    "004433",
                    "002979",
                    "001632",
                    "001618",
                    "001553",
                    "001630",
                    "001551",
                    "001595",
                    "003096",
                    "006753",
                    "008282",
                    "004855",
                    "501012",
                    "009063",
                    "004522",
                    "011036",
                    "008682",
                    "009645",
                    "000217",
                    "012414",
                    "012769",
                    "012755",
                    "005064",
                    "013478",
                    "012725",
                    "159713",
                    "010524",
                    "014130"
                ],
                tableData: []
            },
            mounted() {
                this.getFundInfo();
            },
            methods: {
                sortByNumber(a, b) {
                    return parseFloat(a.gszzl) - parseFloat(b.gszzl);
                },
                async getFundInfo() {
                    for (let i = 0; i < this.fundArr.length; i++) {
                        const codeStr = this.fundArr[i];
                        const data = await this.qryFundInfo(i, codeStr);
                        this.tableData.push(data);
                    }
                },
                qryFundInfo(index, codeStr) {
                    return new Promise((resolve, reject) => {
                        setTimeout(() => {
                            const url = `https://fundgz.1234567.com.cn/js/${codeStr}.js`;
                            $.ajax({
                                url: url,
                                type: 'GET', //数据提交
                                contentType: 'jsonp', // 传参格式（默认为表单） json为application/json
                                dataType: 'jsonp', // 数据类型
                                jsonp: 'callback', // 指定回调函数名，与服务器端接收的一致，并回传回来
                                jsonpCallback: "jsonpgz",
                                success: (data) => {
                                    if (data) {
                                        resolve({ ...data, ...{ index: index } });
                                    } else {
                                        resolve({
                                            index: index,
                                            name: '未知',
                                            fundcode: codeStr,
                                            gszzl: 0,
                                            gztime: '',
                                        });
                                    }

                                },
                                error: (err) => {
                                    resolve({
                                        index: index,
                                        name: '未知',
                                        fundcode: codeStr,
                                        gszzl: 0,
                                        gztime: '',
                                    });
                                }
                            })
                        }, 50);
                    });
                }
            }
        })
    </script>
    <!-- Cloudflare Web Analytics -->
    <script defer src='https://static.cloudflareinsights.com/beacon.min.js'
        data-cf-beacon='{"token": "01555b1af6c14b17b41a06471f26d716"}'></script>
    <!-- End Cloudflare Web Analytics -->
</body>

</html>